const {HashRouter, Link, Route, Switch, useParams} = ReactRouterDOM;
const {PureComponent} = React;

// const { propTypes ,withRouter } = ReactRouter

/**
 * 仪表盘
 */
class Dashboard extends PureComponent {
    render() {
        return (
            <div class="container">
                <switch>
                    <Redirect from="/dashboard" to="/dashboard/home" componwent={Home}/>
                    <div className="nav">
                        <NavLink to="/dashboard/home" activeClassName="active">首页</NavLink>
                        <NavLink to="/dashboard/about" activeClassName="active">关于</NavLink>
                        <NavLink to="/dashboard/users" activeClassName="active">用户中心</NavLink>
                    </div>
                    <div className="content">
                        <Route path="/dashboard/home" component={Home}/>
                        <Route path="/dashboard/about" component={About} />
                        <Route path="/dashboard/users" component={Users}></Route>
                    </div>
                </switch>
            </div>
        );
    }
}




/**
 * 登录
 */
class LoginPage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: [],
        };
    }
    componentDidMount() {}

    render() {
        return (
            <div className="login-container" id="login-container">
                登录页面
            </div>
        );
    }
}

/**
 * 主页页面
 * @param{*}props
 * @returns
 */
class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
        };
    }

    componentDidMount() {
        this.getData();
    }

    getData() {
        getHomeData().then((res) => {
            console.log("res:", res);
            const {
                data: {data: {list},}, code, status,} = res;
            this.setState({
                list: list,
            });
        });
    }

    render() {
        return (
            <div className="home-container">
                <div className="header">主页</div>
                <div className="main">
                    <div className="aside">侧边栏</div>
                    <div className="content">
                        <div className="list-goods">
                            {
                                this.state.list.map((item) => (
                                    <div className="item" id={item.id}>
                                        <div className="thumbail">
                                            <img src={item.image} alt=""/>
                                        </div>
                                        <div className="user-name">{item.nickname}</div>
                                    </div>
                                ))
                            }
                        </div>
                    </div>
                </div>
                <div className="footer">底部</div>
            </div>
        );
    }
}

/**
 * 关于页面：通过状态提升进行组件之间传值
 * @param{*}props
 * @returns
 */
class About extends React.Component{
    constructor(){
        super()
        this.state = {
            msg:"时间简史"
        }
    }
    /**
     * 事件
     */
    myEvent = (data) => {
        console.log("组合示例接收参数：",data)
        this.setState({
            msg:data
        })
    }

    render(){
        return (
            <div className="about-container">
                <div className="header">关于</div>
                <div className="main">
                    <div className="content">  {/**状态提升*/}
                        <div className="state-up">
                            <h3>组件之间通过状态提升传值</h3>
                            <ChildComponent onMyEvent={ this.myEvent }/>
                            <ChildSiblingComponent msg={ this.state.msg }/>
                        </div>
                    </div>
                    <div className="aside">侧边栏</div>
                </div>
                <div className="footer">底部</div>
            </div>
        )
    }

}

/**
 * 通过状态给兄弟组件发送数据
 */
class ChildComponent extends  React.Component{
    constructor(props) {
        super(props)
        this.state = {
            msg: "This is compose of component !"
        }
    }

    clickHandle = () => {
        this.props.onMyEvent(this.state.msg)
    }

    render(){
        return(
            <div className="child1">
                <h4>子组件一：</h4>
                <div className="btn" onClick={ this.clickHandle }>传值</div>
            </div>
        )
    }
}

/**
 * 接收兄弟组件传过来的参数
 */
class ChildSiblingComponent extends  React.Component{
    constructor(props) {
        super(props)
        console.log(props)
    }
    render(){
        return(
            <div className="child1">
                <h4>子组件二：</h4>
                <div className="child2"> { this.props.msg } </div>
            </div>
        )
    }
}

/**
 * 个人中心
 */
class Users extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            users: [
                {id: 0, name: "小费"},
                {id: 1, name: "小费"},
                {id: 2, name: "小费"},
                {id: 3, name: "小费"},
            ],
        };
    }

    render() {
        return (
            <div className="users-container">
                <div className="header"> 用户中心</div>
                <div className="main">
                    <div className="aside">
                        {/* 在应用中用 Link 去链接路由 */}
                        <ul className="menu">
                            {
                                this.state.users.map((user) => (
                                    <li key={user.id}>
                                        <NavLink to={`/users/${user.id}`} activeClassName="active">
                                            {user.name} --- {user.id}
                                        </NavLink>
                                    </li>
                                ))
                            }
                        </ul>
                    </div>
                    <div className="content">
                        <Switch>
                            <Route path="/users/:id" children={<User/>}/>
                        </Switch>
                    </div>
                </div>
                <div className="footer">底部</div>
            </div>
        );
    }
}

/**
 * 具体用户情况
 */
class User extends React.Component {
    constructor(prop) {
        super();
        this.state = {
            name: "小费",
            id: 0
        }
    }

    componentDidMount() {
    }

    render() {
        // const {id} = useParams();
        // // console.log("id:", id)
        // this.state.id = id
        return (
            <div className="user-name">
                <h2>This is the list of user.</h2>
                <h2>{this.state.name}</h2>
                <div className="avatar">
                    <div className="title">{this.state.id}</div>
                    <div className="icon-avatar">
                        <img className="img" src="./img/bg.jpg" alt=""/>
                    </div>
                    <p className="person-info">这个是react组件个人的卡片信息。</p>
                </div>
            </div>
        );
    }
}
